<template>
  <n-space :vertical="false" v-if="permissionShow || !permissionShow">
    <n-popover :trigger="props.isTip ? 'hover' : null">
      <template #trigger>
        <n-button
          :attr-type="attrType"
          :block="props.block"
          :bordered="props.bordered"
          :circle="props.circle"
          :color="props.color"
          :disabled="props.disabled"
          :focusable="props.focusable"
          :ghost="props.ghost || props.plain"
          :icon-placement="props.iconPlacement"
          :keyboard="props.keyboard"
          :loading="props.loading"
          :quaternary="props.quaternary"
          :round="props.round"
          :size="props.size"
          :secondary="props.secondary"
          :strong="props.strong"
          :tertiary="props.tertiary"
          :text="props.text"
          :text-color="props.textColor"
          :type="props.type"
          @click="buttonClick"
          class="gsButton"
        >
          <!-- 按钮iconfont -->
          <i
            v-if="iconfont"
            :class="['iconfont', iconfont]"
            :style="
              'font-size:' + props.iconSize + 'px; color:' + (props.color ? '#fff' : iconColor)
            "
          ></i>
          <!-- 按钮图标 -->
          <span
            v-if="iconSlot"
            :style="'width:' + iconSize + 'px; color:' + (color ? '#fff' : iconColor)"
          >
            <component :is="iconSlot" />
          </span>
          <!-- 按钮文字 -->
          <span v-if="!!useSlots().default && !props.isTip" class="ml-1 text"><slot></slot></span>
        </n-button>
      </template>
      <span v-if="!!useSlots().default" class="ml-1"><slot></slot></span>
    </n-popover>
  </n-space>
</template>

<script lang="ts" setup>
  import { PropType, computed, useSlots } from 'vue';
  import { usePermission } from '@/hooks/web/usePermission';
  const { hasPermission } = usePermission();
  const emit = defineEmits(['click']);
  // 实时计算按钮权限是否展示
  const permissionShow = computed(() => {
    if (props.permissionKey) {
      const permissionArr = props.permissionKey.split(',');
      return hasPermission(permissionArr);
    } else {
      return true;
    }
  });
  const props = defineProps({
    // 按钮操作权限
    permissionKey: {
      type: String,
      default: () => '',
    },
    // 按钮的 DOM 的 type 属性
    attrType: {
      type: String as PropType<'button' | 'submit' | 'reset'>,
      default: () => 'button',
    },
    // 图标类型
    icon: {
      type: String,
      default: () => undefined,
    },
    // 图标尺寸
    iconSize: {
      type: Number,
      default: () => 18,
    },
    // 按钮是否显示为块级
    block: {
      type: Boolean,
      default: () => false,
    },
    // 按钮是否显示 border
    bordered: {
      type: Boolean,
      default: () => true,
    },
    // 按钮是否为圆形
    circle: {
      type: Boolean,
      default: () => false,
    },
    // 按钮颜色
    color: {
      type: String,
      default: () => undefined,
    },
    // 按钮是否禁用
    disabled: {
      type: Boolean,
      default: () => false,
    },
    // 按钮是否可以被聚焦
    focusable: {
      type: Boolean,
      default: () => true,
    },
    // 按钮是否透明
    ghost: {
      type: Boolean,
      default: () => false,
    },
    plain: {
      type: Boolean,
      default: () => false,
    },
    // 按钮中图标的位置
    iconPlacement: {
      type: String as PropType<'left' | 'right'>,
      default: () => 'left',
    },
    // 是否支持键盘操作
    keyboard: {
      type: Boolean,
      default: () => true,
    },
    // 按钮是否显示加载状态
    loading: {
      type: Boolean,
      default: () => false,
    },
    // 是否是四级按钮
    quaternary: {
      type: Boolean,
      default: () => false,
    },
    // 按钮是否显示圆角
    round: {
      type: Boolean,
      default: () => false,
    },
    // 按钮的尺寸
    size: {
      type: String as PropType<'tiny' | 'small' | 'medium' | 'large'>,
      default: () => 'medium',
    },
    // 是否是次要按钮
    secondary: {
      type: Boolean,
      default: () => false,
    },
    // 按钮文字是否加粗
    strong: {
      type: Boolean,
      default: () => false,
    },
    // 是否是三级按钮
    tertiary: {
      type: Boolean,
      default: () => false,
    },
    // 是否显示为文本按钮
    text: {
      type: Boolean,
      default: () => false,
    },
    // 按钮文字颜色
    textColor: {
      type: String,
      default: () => undefined,
    },
    // 按钮的类型
    type: {
      type: String as PropType<
        'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
      >,
      default: () => 'default',
    },
    isTip: {
      type: Boolean,
      default: () => false,
    },
    // 图标插槽
    iconSlot: {},
  });

  // 通过按钮传的icon类型，判断展示的iconfont图标（需提前把图标引入到main.ts中）
  const iconfont = computed(() => {
    let iconName = props.icon;
    switch (props.icon) {
      case 'add':
        iconName = 'icon-add';
        break;
      case 'del':
        iconName = 'icon-del';
        break;
      case 'edit':
        iconName = 'icon-edit';
        break;
      case 'search':
        iconName = 'icon-search';
        break;
      case 'up':
        iconName = 'icon-up';
        break;
      case 'down':
        iconName = 'icon-down';
        break;
      case 'download':
        iconName = 'icon-download';
        break;
      case 'import':
        iconName = 'icon-import1';
        break;
      case 'stop':
        iconName = 'icon-stop';
        break;
      case 'ok':
        iconName = 'icon-ok';
        break;
      case 'tiaojie':
        iconName = 'icon-tiaojie';
        break;
      case 'save':
        iconName = 'icon-save';
        break;
      case 'lock':
        iconName = 'icon-suoding';
        break;
      case 'reset':
        iconName = 'icon-reset';
        break;
      case 'shouquanuser':
        iconName = 'icon-shouquanuser';
        break;
      case 'shouquangroup':
        iconName = 'icon-shouquangroup';
        break;
      case 'tongdao':
        iconName = 'icon-tongdao';
        break;
      case 'refresh':
        iconName = 'icon-shuaxin';
        break;
      case 'list':
        iconName = 'icon-list';
        break;
      case 'camera':
        iconName = 'icon-camera2';
        break;
      case 'done':
        iconName = 'icon-done';
        break;
      case 'osd':
        iconName = 'icon-OSD';
        break;
      case 'setting':
        iconName = 'icon-setting';
        break;
      case 'share':
        iconName = 'icon-share';
        break;
      // 以下是2024-4-11新增
      case 'updatelog':
        iconName = 'icon-updatelog';
        break;
      case 'send':
        iconName = 'icon-send';
        break;
      case 'history':
        iconName = 'icon-history';
        break;
      case 'upload':
        iconName = 'icon-upload';
        break;
      // 以下为VAP补充图标
      case 'replay':
        iconName = 'icon-replay';
        break;
      case 'file':
        iconName = 'icon-file';
        break;
      case 'lishibanben':
        iconName = 'icon-lishibanben';
        break;
      case 'yanchangshipin':
        iconName = 'icon-yanchangshipin';
        break;
      case 'checkok':
        iconName = 'icon-checkok';
        break;
      case 'checkfail':
        iconName = 'icon-checkfail';
        break;
      case 'checkwait':
        iconName = 'icon-checkwait';
        break;
      default:
        break;
    }
    return iconName;
  });

  // 图标颜色
  const iconColor = computed(() => {
    if (props.type !== 'default') {
      return '#fff';
    } else {
      return '#333';
    }
  });

  // 事件点击
  function buttonClick(e: Event) {
    emit('click', e);
  }
</script>

<style lang="less" scoped>
  .iconfont {
    color: #000;
    // margin-right: 4px;
  }
  .gsButton {
    vertical-align: middle;
  }
  :deep(.n-button) {
    i {
      color: #fff;
    }
  }
</style>
